<template>
    <div class="page-container">
        <TableHead
            :config="tableHeaderConfig"
            :searchdata.sync="filters"
            v-show="showSearch"
            @parentPageList="findPageList"
        >
            <el-select v-model="filters.dictId" slot="label" placeholder="请选择" size="mini" @change="changeDict">
                <el-option v-for="item in allDictList" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
        </TableHead>
        <!--表格内容栏-->
        <el-card class="card-box">
            <table-tool-bar :showSearch.sync="showSearch" @queryTable="findPageList" :columns="columns">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            </table-tool-bar>
            <Table :columns="columns" :data="tableList" :loading="loading" showNo>
                <template slot="isValid" slot-scope="{ scope }">
                    <el-switch
                        v-model="scope.row.isValid"
                        :active-value="1"
                        :inactive-value="0"
                        @change="handleEnable(scope.row)"
                    ></el-switch>
                </template>
                <template slot="oper" slot-scope="{ scope }">
                    <el-button
                        size="mini"
                        type="text"
                        v-if="scope.row.isValid === 1"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </Table>
        </el-card>
        <!--新增与编辑的弹窗-->
        <EditItem
            v-model="dialogVisible"
            :data-form="dataForm"
            :dialog-config="dialogConfig"
            :data-form-rules="dataFormRules"
            :dialog-tag="dialogTag"
            :title="title"
            width="600px"
            @submitForm="submitForm"
        ></EditItem>
    </div>
</template>

<script>
import TableHead from '@/components/TableHeadSearch'
import TableToolBar from '@/components/TableToolBar'
import EditItem from '@/components/EditItem'
import {
    getAllDictList,
    getDictKeyValList,
    addDictKeyVal,
    editDictKeyVal,
    dictKeyValEnable,
    deleteKeyValue
} from '@/api/system/dict'
import { confirm } from '@/utils/utils'

export default {
    name: 'dictDetail',
    components: {
        TableHead,
        EditItem,
        TableToolBar
    },
    data() {
        return {
            title: '新增',
            showSearch: true,
            // 表格要查询的字段配置
            filters: {
                label: '',
                type: '',
                dictKey: '',
                isValid: null,
                dictId: ''
            },
            loading: false,
            // 表格搜索处的字段
            tableHeaderConfig: [
                { title: '字典名称', slot: 'label' },
                { title: '字典标签', code: 'dictKey', type: 'input' },
                { title: '字典类型', code: 'type', type: 'input' },
                { title: '状态', code: 'isValid' }
            ],
            // 列表的列的展示字段
            columns: [
                { prop: 'dictKey', label: '字典标签', visible: true, key: 'dictKey' },
                { prop: 'dictValue', label: '字典键值', visible: true, key: 'dictValue' },
                { prop: 'dictType', label: '字典类型', visible: true, key: 'dictType' },
                { prop: 'orderNum', label: '排序', visible: true, key: 'orderNum' },
                { slot: 'isValid', label: '状态', visible: true, key: 'isValid' },
                {
                    prop: 'description',
                    label: '描述',
                    minWidth: 200,
                    showOverflowTooltip: true,
                    visible: true,
                    key: 'description'
                },
                { label: '创建人/创建时间', type: 'createUser', visible: true, key: 'createUser' },
                { label: '更新人/更新时间', type: 'updateUser', visible: true, key: 'updateUser' },
                {
                    slot: 'oper',
                    label: '操作',
                    align: 'center',
                    minWidth: 120,
                    fixed: 'right',
                    visible: true,
                    key: 'oper'
                }
            ],
            // 接口返回data
            tableList: [],
            total: 0,
            // 新增编辑界面是否显示
            dialogVisible: false,
            // 规则
            dataFormRules: {
                dictKey: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
                dictValue: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }]
            },
            // 新增编辑界面数据
            dataFormDefault: {
                id: '',
                dictId: '',
                description: '',
                dictKey: '',
                dictType: '',
                dictValue: '',
                // isDefault: 0,
                isValid: 1,
                orderNum: 0
            },
            dataForm: {},
            // dialog 要渲染的数据json
            dialogConfig: [
                { title: '字典类型', code: 'dictType', type: 'input', disabled: true },
                { title: '数据标签', code: 'dictKey', type: 'input', maxlength: 20 },
                { title: '数据键值', code: 'dictValue', type: 'input', maxlength: 20 },
                // { title: '默认选中', code: 'isDefault', type: 'radio' },
                { title: '显示排序', code: 'orderNum', type: 'number' },
                {
                    title: '描述',
                    code: 'description',
                    type: 'textarea',
                    maxlength: 200
                }
            ],
            dialogTag: '', // 编辑与新样的标识
            allDictList: [],
            currentRow: null // 当前的字典项
        }
    },
    mounted() {},
    created() {
        this.filters.dictId = this.$route.params && Number(this.$route.params.dictId)
        this.dataFormDefault.dictId = this.filters.dictId
        this.findPageList()
        this.getAllDictList()
    },
    methods: {
        changeDict(id) {
            this.filters.dictId = id
            this.filters.pageNum = 1
            this.currentRow = this.getCurrentDict(this.allDictList)
            this.dataFormDefault.dictType = this.currentRow.type
            this.findPageList()
        },
        getAllDictList() {
            getAllDictList().then((res) => {
                this.allDictList = res.data
                this.currentRow = this.getCurrentDict(this.allDictList)
                this.dataFormDefault.dictType = this.currentRow.type
            })
        },
        getCurrentDict(allDictList) {
            for (let i = 0; i < allDictList.length; i++) {
                let item = allDictList[i]
                if (item.id == this.filters.dictId) {
                    return item
                }
            }
        },
        // 获取分页数据
        findPageList() {
            this.loading = true
            getDictKeyValList(this.filters)
                .then((res) => {
                    this.tableList = res.data || []
                })
                .finally(() => {
                    this.loading = false
                })
        },
        // 删除
        handleDelete(id) {
            confirm('确定要删除吗').then(() => {
                deleteKeyValue({ id: id }).then((res) => {
                    this.$message.success('删除成功')
                    this.findPageList()
                })
            })
        },
        handleEnable(row) {
            let tip = row.isValid === 0 ? '确定禁用该字典项吗?' : '确定启用该字典项吗?'
            confirm(tip)
                .then(() => {
                    dictKeyValEnable({ id: row.id, isValid: row.isValid })
                        .then((res) => {
                            this.findPageList()
                        })
                        .catch(() => {
                            row.isValid = row.isValid === 0 ? 1 : 0
                        })
                })
                .catch(() => {
                    row.isValid = row.isValid === 0 ? 1 : 0
                })
        },
        // 显示新增界面
        handleAdd() {
            this.dialogVisible = true
            this.dataForm = Object.assign({}, this.dataFormDefault)
            this.dialogTag = 'add'
        },
        // 显示编辑界面
        handleEdit(params) {
            this.title = '编辑'
            this.dialogVisible = true
            this.dataForm = Object.assign({}, params)
            this.dialogTag = 'edit'
        },
        // 编辑与新增 提交 请求接口
        submitForm(data) {
            let fetchApi = this.dialogTag === 'add' ? addDictKeyVal : editDictKeyVal
            fetchApi(data).then((res) => {
                this.$message.success('操作成功')
                this.findPageList()
                this.dataForm = Object.assign({}, this.dataFormDefault)
                this.dialogVisible = false
            })
        }
    }
}
</script>
<style scoped></style>
